<template>
    <div>
        <el-drawer v-model="showDialog" :show-close="true" :title="title" size="900px" :close-on-click-modal="false"
                   :close-on-press-escape="false">
            111
        </el-drawer>
    </div>
</template>
<script lang="ts" setup>
import {ref, watch} from 'vue'

const title = ref('新建接口配置')
const showDialog = ref(false)
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    type: {
        type: String,
        default: 'add'
    }
})
const emits = defineEmits(['update:show'])
watch(() => props.show, (newVal) => {
    showDialog.value = newVal
    if (newVal) {
        console.log(11)
    }
})
watch(() => props.type, (newVal) => {
    title.value = newVal === 'add' ? '新建接口配置' : '编辑接口配置'
})
watch(showDialog, (newVal) => {
    emits('update:show', newVal)
})
</script>
<style lang="scss" scoped>
:deep(.el-drawer__header) {
    border-bottom: 1px solid #DEE0E3;
    font-weight: bold;
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
}
</style>